<template>
  <div class="screenCon content ">
    <!-- 顶部导航区域 -->
    <div class="header ">
      <div class="nav-tabs timeChoose">
        <el-radio-group v-model="timeSelected" @change='timeSelectChange'>
          <el-radio-button v-for="(item,index) in timeList" :label="item.value" :key="index">{{ item.name }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <div class="header-title">辽宁高速通新媒体服务矩阵实时数据</div>
      <div class="current-time">{{nowTime}}</div>
    </div>
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧区域 -->
      <div class="left-panel">
        <!-- 用户统计模块 -->
        <div class="user-stats">
          <el-table
            ref="userInfoTable"
            :data="userInfoFrom.userList"
            height="95%"
            style="width: 100%"
            @mouseenter="stopScroll"
            @mouseleave="startScroll">
            <el-table-column
              prop="channelType"
              label="渠道类型"
              width="100">
            </el-table-column>
            <el-table-column
              label="累计用户"
              width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ formatQ(scope.row.cumulativeCount) }}人</span>
              </template>
            </el-table-column>
            <el-table-column
              label="新增用户"
              width="110">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ formatQ(scope.row.newCount) }}人</span>
              </template>
            </el-table-column>
            <el-table-column
              label="日活用户"
              width="110">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ formatQ(scope.row.dauCount) }}人</span>
              </template>
            </el-table-column>
          </el-table>
          <!--<div class="user-tabs">-->
          <!--  <span class="tab active">活跃数据</span>-->
          <!--  <span class="tab">累计用户</span>-->
          <!--  <span class="tab">新增用户</span>-->
          <!--  <span class="tab">日活用户</span>-->
          <!--</div>-->
          <!--<div class="user-platforms">-->
          <!--  <div class="platform-item">-->
          <!--    <div class="platform-name">APP</div>-->
          <!--    <div class="total">{{ formatQ(userInfoFrom.totalInstall) }}人</div>-->
          <!--    <div class="new">{{ formatQ(userInfoFrom.install) }}人</div>-->
          <!--    <div class="active">{{ formatQ(userInfoFrom.appOnline) }}人</div>-->
          <!--  </div>-->
          <!--  <div class="platform-item">-->
          <!--    <div class="platform-name">小程序</div>-->
          <!--    <div class="total">{{ formatQ(userInfoFrom.appletUser) }}人</div>-->
          <!--    <div class="new">{{ formatQ(userInfoFrom.appletIncUsers) }}人</div>-->
          <!--    <div class="active">{{ formatQ(userInfoFrom.appletVisit) }}人</div>-->
          <!--  </div>-->
          <!--  <div class="platform-item">-->
          <!--    <div class="platform-name">微博</div>-->
          <!--    <div class="total">{{ formatQ(userInfoFrom.weiboUser) }}人</div>-->
          <!--    <div class="new">{{ formatQ(userInfoFrom.weiboDailyUser) }}人</div>-->
          <!--    <div class="active">{{ formatQ(userInfoFrom.weiboDailyRead) }}人</div>-->
          <!--  </div>-->
          <!--  <div class="platform-item">-->
          <!--    <div class="platform-name">公众号</div>-->
          <!--    <div class="total">{{ formatQ(userInfoFrom.wechatUser) }}人</div>-->
          <!--    <div class="new">{{ formatQ(userInfoFrom.wechatDailyUser) }}人</div>-->
          <!--    <div class="active">{{ formatQ(userInfoFrom.wechatDailyRead) }}人</div>-->
          <!--  </div>-->
          <!--</div>-->
        </div>

        <!-- 发布统计模块 -->
        <div class="publish-stats">
          <div class="publish-tabs">
            <div class="typeSelect">
              <el-radio-group v-model="publicTypeSelected" @change='publicSelectChange'>
                <el-radio-button v-for="(item,index) in typeList" :label="item.value" :key="index">{{ item.name }}
                </el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="publish-data">
            <div class="fl">
              <div class="publish-main">
                <div class="today-publish"><b v-for='(item,index) in timeList' :key='index'
                                              v-if='timeSelected == item.value'
                                              style="font-weight:normal">{{ item.name }}</b>发布总数:
                  <span>{{ formatQ(issueInfoForm.publishTotal) }}</span></div>
                <div v-if="issueInfoForm.rate >= 0" class="publish-increase">较昨日+{{ issueInfoForm.rate }}%↑</div>
                <div v-if="issueInfoForm.rate < 0" class="publish-decrease">较昨日{{ issueInfoForm.rate }}%↓</div>
              </div>
              <div class="publish-main">
                <div class="today-publish">累计发布总数：</div>
                <em>{{ formatQ(issueInfoForm.publishTotalAll) }}</em>
              </div>
            </div>
            <div class="publish-chart">
              <div class="pie-chart" id="main3">
                <public-bing :formObj='issueInfoForm'></public-bing>
              </div>
            </div>
          </div>
        </div>

        <!-- 阅读浏览量模块 -->
        <div class="browse-stats">
          <div class="publish-tabs">
            <div class="typeSelect">
              <el-radio-group v-model="viewTypeSelected" @change='pageViewsSelectChange'>
                <el-radio-button v-for="(item,index) in typeList" :label="item.value" :key="index">{{ item.name }}
                </el-radio-button>
              </el-radio-group>
            </div>
            <!--<span class="tab active">文字</span>
            <span class="tab">音频</span>
            <span class="tab">视频</span>
            <span class="tab">图文</span>-->
          </div>
          <div class="browse-chart">
            <div class="chart-content" id="main1">
              <!-- 折线图占位 -->
              <!--<page-views-line :formList='pageViewsForm' :timeSelected='timeSelected' key='pageViews'></page-views-line>-->
              <ouraffect-linemain :formList='ouraffectFrom.wordList' :timeSelected='timeSelected' v-show='viewTypeSelected == 1' key='ouraffect1'></ouraffect-linemain>
              <ouraffect-mian :formList='ouraffectFrom.audioList' :timeSelected='timeSelected' v-show='viewTypeSelected == 2' key='ouraffect2'></ouraffect-mian>
              <ouraffect-line :formList='ouraffectFrom.photoList' :timeSelected='timeSelected' v-show='viewTypeSelected == 4' key='ouraffect3'></ouraffect-line>
              <ouraffect-zhu :formList='ouraffectFrom.videoList' :timeSelected='timeSelected' v-show='viewTypeSelected == 3' key='ouraffect4'></ouraffect-zhu>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间区域 -->
      <div class="center-panel">
        <!-- 用户总数和日活用户卡片 -->
        <div class="top-cards">
          <div class="card user-total">
            <div class="card-value">
              <num-change class="numStyFm" :numbers='userInfoFrom.cumulativeCountTotal'></num-change>
            </div>
          </div>
          <div class="card daily-active">
            <div class="card-value">
              <num-change class="numStyFm" :numbers='userInfoFrom.dauCountTotal'></num-change>
            </div>
          </div>
        </div>

        <!-- 地图区域 -->
        <div class="map-area">
          <div class="map-container" id="main2">
            <maps v-if='mapFrom&&mapObj&&mapPointObj&&mapLiaoningPointObj&&liaoningmapObj' :mapFrom='mapFrom'
                  :mapObj="mapObj" :mapPointObj="mapPointObj" :mapLiaoningPointObj="mapLiaoningPointObj"
                  :liaoningmapObj="liaoningmapObj"></maps>
          </div>
        </div>

        <div class="recommendations">
          <el-table
            :data="recommendationList"
            height="95%"
            style="width: 100%;margin-left:10px">
            <el-table-column
              prop="seq"
              label="序号"
              width="50">
            </el-table-column>
            <el-table-column
              prop="title"
              label="标题"
              >
            </el-table-column>
            <el-table-column
              prop="publicTime"
              label="发布时间"
			  :formatter="formatDate"
              width="100" >
            </el-table-column>
          </el-table>
          <!--<div class="recommendation-table">-->
          <!--  <div class="table-header">-->
          <!--    <span class="col-rank">序号</span>-->
          <!--    <span class="col-title">标题</span>-->
          <!--    <span class="col-time">发布时间</span>-->
          <!--  </div>-->
          <!--  <div class="table-body">-->
          <!--    <div class="swiper mySwiper">-->
          <!--      <div class="swiper-wrapper">-->
          <!--        <div class="swiper-slide">-->
          <!--          <div class="table-row">-->
          <!--            <span class="col-rank">-->
          <!--              <img src="images/icons_15.png"/>-->
          <!--            </span>-->
          <!--            <span class="col-title">辽宁高速辽宁高速新消息辽宁辽宁高速新消息辽宁高速</span>-->
          <!--            <span class="col-time">2025-06-12 11:03:12</span>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--        <div class="swiper-slide">-->
          <!--          <div class="table-row">-->
          <!--            <span class="col-rank"><img src="images/icons_18.png"/></span>-->
          <!--            <span class="col-title">辽宁高速辽宁高速新消息辽宁辽宁高速新消息辽宁高速</span>-->
          <!--            <span class="col-time">2025-06-12 11:03:12</span>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--        <div class="swiper-slide">-->
          <!--          <div class="table-row">-->
          <!--            <span class="col-rank"><img src="images/icons_20.png"/></span>-->
          <!--            <span class="col-title">辽宁高速辽宁高速新消息辽宁辽宁高速新消息辽宁高速</span>-->
          <!--            <span class="col-time">2025-06-12 11:03:12</span>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--        <div class="swiper-slide">-->
          <!--          <div class="table-row">-->
          <!--            <span class="col-rank"><img src="images/icons_22.png"/></span>-->
          <!--            <span class="col-title">辽宁高速辽宁高速新消息辽宁辽宁高速新消息辽宁高速</span>-->
          <!--            <span class="col-time">2025-06-12 11:03:12</span>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--        <div class="swiper-slide">-->
          <!--          <div class="table-row">-->
          <!--            <span class="col-rank"><img src="images/icons_24.png"/></span>-->
          <!--            <span class="col-title">辽宁高速辽宁高速新消息辽宁辽宁高速新消息辽宁高速</span>-->
          <!--            <span class="col-time">2025-06-12 11:03:12</span>-->
          <!--          </div>-->
          <!--        </div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--  </div>-->
          <!--</div>-->
        </div>
      </div>

      <!-- 右侧区域 -->
      <div class="right-panel">
        <!-- 直播动态模块 -->
        <div class="live-stats">
          <div class="live-container">
            <!--<hls-player-->
            <!--  :src="videoSource"-->
            <!--  width="100%"-->
            <!--  height="100%"-->
            <!--  :autoplay="true"-->
            <!--  :muted="true"-->
            <!--  :show-controls="true"-->
            <!--  @play="onPlay"-->
            <!--  @pause="onPause"-->
            <!--  @ended="onEnded"-->
            <!--  @error="onError"-->
            <!--/>-->
            <hls-player-with-danmaku-display
              v-if="videoSource"
              :src="videoSource"
              :danmaku-messages="receivedDanmakus"
              width="100%"
              height="100%"
              :autoplay="true"
              :muted="true"
            />

            <!--<div class="live-banner">-->
            <!--</div>-->
            <!--<div class="live-stream">-->
            <!--  <img src="images/icons_13.jpg"/>-->
            <!--</div>-->
            <div class="live-comments">
              <!--<div class="comment-item">-->
              <!--  <span class="comment-time">[11:03:12]</span>-->
              <!--  <span class="comment-user">**露声**</span>-->
              <!--  <span class="comment-content">路产巡检发现的问题怎么办</span>-->
              <!--</div>-->
              <!--<div class="comment-item">-->
              <!--  <span class="comment-time">[11:03:12]</span>-->
              <!--  <span class="comment-user">**沈阳**</span>-->
              <!--  <span class="comment-content">沈阳到本溪一级公路什么时候好一点</span>-->
              <!--</div>-->
              <!--<div class="comment-item">-->
              <!--  <span class="comment-time">[11:03:12]</span>-->
              <!--  <span class="comment-user">**锦州**</span>-->
              <!--  <span class="comment-content">锦州到海城能走高速吗</span>-->
              <!--</div>-->
              <!--<div class="comment-item">-->
              <!--  <span class="comment-time">[11:03:12]</span>-->
              <!--  <span class="comment-user">**滨海**</span>-->
              <!--  <span class="comment-content">滨海站封了吗</span>-->
              <!--</div>-->
              <!--<div class="comment-item on">-->
              <!--  <span class="comment-time">[11:03:12]</span>-->
              <!--  <span class="comment-content">当前直播间人数133，累计直播间人数4.5万</span>-->
              <!--</div>-->
              <!--<div class="comment-item on1">-->
              <!--  <span class="comment-time">[11:03:12]</span>-->
              <!--  <span class="comment-content">**关注了主播**</span>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="title">辽宁高速新媒体运营实时数据</div>-->
    <!--<div class="sssj">数据截止到{{nowTime}}</div>-->
    <!--<div class="contain">-->
    <!--  <div class="left">-->
    <!--    <div class="userNum">-->
    <!--      <div>-->
    <!--        <div class="titles">-->
    <!--          <div>用户</div>-->
    <!--          <div style="margin-top: .05rem;">总数</div>-->
    <!--        </div>-->
    <!--        <num-change class="numStyFm" :numbers='userInfoFrom.sumNum'></num-change>-->
    <!--      </div>-->
    <!--      <div style="margin-top:.1rem;">-->
    <!--        <div class="titles">-->
    <!--          <div>用户</div>-->
    <!--          <div style="margin-top: .05rem;">日活</div>-->
    <!--        </div>-->
    <!--        <num-change class="numStyFm" :numbers='userInfoFrom.allActive'></num-change>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="ourUser">-->
    <!--      <div class="blockTitle">-->
    <!--        <div class="blueBlock"></div>-->
    <!--        <div class="titleText">我们的用户</div>-->
    <!--      </div>-->
    <!--      <div class="cons">-->
    <!--        <div class="othersCon">-->
    <!--          <div class="leftIcon">-->
    <!--            <img src="../assets/img/app.png" alt="">-->
    <!--            <div style='margin-left:.14rem;'>APP</div>-->
    <!--          </div>-->
    <!--          <div class='rightCon disF'>-->
    <!--            <div>-->
    <!--              <div class="conTitles">累计用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.totalInstall) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">新增用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.install) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">访问次数</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.appOnline) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="othersCon">-->
    <!--          <div class="leftIcon">-->
    <!--            <img src="../assets/img/xcx.png" alt="">-->
    <!--            <div style='margin-left:.14rem;'>小程序</div>-->
    <!--          </div>-->
    <!--          <div class='rightCon disF'>-->
    <!--            <div>-->
    <!--              <div class="conTitles">累计用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.appletUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">新增用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.appletIncUsers) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">访问次数</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.appletVisit) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="othersCon">-->
    <!--          <div class="leftIcon">-->
    <!--            <img src="../assets/img/weixin.png" alt="">-->
    <!--            <div style='margin-left:.14rem;'>微信</div>-->
    <!--          </div>-->
    <!--          <div class='rightCon disF'>-->
    <!--            <div>-->
    <!--              <div class="conTitles">累计用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.wechatUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">新增用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.wechatDailyUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">访问次数</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.wechatDailyRead) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="othersCon">-->
    <!--          <div class="leftIcon">-->
    <!--            <img src="../assets/img/wb.png" alt="">-->
    <!--            <div style='margin-left:.14rem;'>微博</div>-->
    <!--          </div>-->
    <!--          <div class='rightCon disF'>-->
    <!--            <div>-->
    <!--              <div class="conTitles">累计用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.weiboUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">新增用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.weiboDailyUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">访问次数</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.weiboDailyRead) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="othersCon">-->
    <!--          <div class="leftIcon">-->
    <!--            <img src="../assets/img/dy.png" alt="">-->
    <!--            <div style='margin-left:.14rem;'>抖音</div>-->
    <!--          </div>-->
    <!--          <div class='rightCon disF'>-->
    <!--            <div>-->
    <!--              <div class="conTitles">累计用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.tiktokUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">新增用户</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.tiktokUserDailyUser) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="conTitles">访问次数</div>-->
    <!--              <div class="conNum numStyFm">{{ formatQ(userInfoFrom.tiktokDailyRead) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--  <div class="middle">-->
    <!--    <div class="timeChoose">-->
    <!--      &lt;!&ndash; <div class="chooseTitle" style="font-size:0.12rem">数据截止到{{nowTime}}</div> &ndash;&gt;-->
    <!--      <el-radio-group v-model="timeSelected" @change='timeSelectChange'>-->
    <!--        <el-radio-button v-for="(item,index) in timeList" :label="item.value" :key="index">{{ item.name }}-->
    <!--        </el-radio-button>-->
    <!--      </el-radio-group>-->
    <!--    </div>-->
    <!--    <div class="mapFrom" style="position: relative;">-->
    <!--      <div class="blockTitle" style="position: absolute;top: .38rem;left: .06rem;">-->
    <!--        <div class="blueBlock"></div>-->
    <!--        <div class="titleText">用户访问来源</div>-->
    <!--      </div>-->
    <!--      <maps v-if='mapFrom&&mapObj&&mapPointObj&&mapLiaoningPointObj&&liaoningmapObj' :mapFrom='mapFrom'-->
    <!--            :mapObj="mapObj" :mapPointObj="mapPointObj" :mapLiaoningPointObj="mapLiaoningPointObj"-->
    <!--            :liaoningmapObj="liaoningmapObj"></maps>-->
    <!--    </div>-->
    <!--    <div class="ourServiceTime">-->
    <!--      <div class="leftEchart">-->
    <!--        <div class="blockTitle">-->
    <!--          <div class="blueBlock"></div>-->
    <!--          <div class="titleText">我们的服务次数</div>-->
    <!--        </div>-->
    <!--        <sertimes-echarts :formObj='serverInfoFrom' style="margin-left:0rem;margin-top:.29rem"></sertimes-echarts>-->
    <!--      </div>-->
    <!--      <div class="serTable">-->
    <!--        <div class="xmfl">-->
    <!--          <div class="titles">-->
    <!--            项目分类-->
    <!--          </div>-->
    <!--          <div class="con">-->
    <!--            <div>-->
    <!--              <div class="blockColor"></div>-->
    <!--              <div>合计</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#00D7E9;"></div>-->
    <!--              <div>APP</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#1890FF;"></div>-->
    <!--              <div>小程序</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#FFD666;"></div>-->
    <!--              <div>微信公众号</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="fwcs">-->
    <!--          <div class="titles">-->
    <!--            服务次数-->
    <!--          </div>-->
    <!--          <div class="con numStyFm lts" style="margin-top:.02rem;">-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.cycleSum) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.cycleAppSum) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.cycleAppletSum) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.cycleWechatSum) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="ljcs">-->
    <!--          <div class="titles">-->
    <!--            累计次数-->
    <!--          </div>-->
    <!--          <div class="con numStyFm lts" style="margin-top:.02rem;">-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.sum) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.appSum) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.appletSum) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(serverInfoFrom.wechatSum) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    &lt;!&ndash; <div class="userFrom">-->
    <!--      <div class="ourUserTitle">-->
    <!--        <div style="font-size: 0.2rem;">用户访问来源</div>-->
    <!--      </div>-->
    <!--    </div>         &ndash;&gt;-->
    <!--  </div>-->
    <!--  <div class="right">-->
    <!--    <div class="userAffect">-->
    <!--      <div class="blockTitle">-->
    <!--        <div class="blueBlock"></div>-->
    <!--        <div class="titleText">我们的影响力</div>-->
    <!--      </div>-->
    <!--      <div class="typeSelect">-->
    <!--        <el-radio-group v-model="typeSelected">-->
    <!--          <el-radio-button v-for="(item,index) in typeList" :label="item.value" :key="index">{{ item.name }}-->
    <!--          </el-radio-button>-->
    <!--        </el-radio-group>-->
    <!--      </div>-->
    <!--      <div class="userAffectTu">-->
    <!--        <ouraffect-linemain :formList='ouraffectFrom.wordList' :timeSelected='timeSelected'-->
    <!--                            v-show='typeSelected == 1' key='ouraffect1'></ouraffect-linemain>-->
    <!--        <ouraffect-mian :formList='ouraffectFrom.audioList' :timeSelected='timeSelected' v-show='typeSelected == 2'-->
    <!--                        key='ouraffect2'></ouraffect-mian>-->
    <!--        <ouraffect-line :formList='ouraffectFrom.photoList' :timeSelected='timeSelected' v-show='typeSelected == 3'-->
    <!--                        key='ouraffect3'></ouraffect-line>-->
    <!--        <ouraffect-zhu :formList='ouraffectFrom.videoList' :timeSelected='timeSelected' v-show='typeSelected == 4'-->
    <!--                       key='ouraffect4'></ouraffect-zhu>-->
    <!--        <ouraffect-etc :formList='ouraffectFrom.functionList' :timeSelected='timeSelected'-->
    <!--                       v-show='typeSelected == 5' key='ouraffect5'></ouraffect-etc>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--    <div class="ourIssue">-->
    <!--      <div class="blockTitle">-->
    <!--        <div class="blueBlock"></div>-->
    <!--        <div class="titleText">我们的发布</div>-->
    <!--      </div>-->
    <!--      <div class="numEcharts">-->
    <!--        <div class="nums">-->
    <!--          <div>-->
    <!--            <div class="titles">-->
    <!--              <span v-for='(item,index) in timeList' :key='index'-->
    <!--                    v-if='timeSelected == item.value'>{{ item.name }}</span>发布总数-->
    <!--            </div>-->
    <!--            <div class="counts numStyFm lts">{{ formatQ(issueInfoForm.cycleSum) }}</div>-->
    <!--          </div>-->
    <!--          <div style="margin-top:.33rem;">-->
    <!--            <div class="titles">累计发布总数</div>-->
    <!--            <div class="counts numStyFm lts">{{ formatQ(issueInfoForm.sum) }}</div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <issuetotle-bing :formObj='issueInfoForm'></issuetotle-bing>-->
    <!--      </div>-->
    <!--      <div class="detialTable">-->
    <!--        <div class="xmfl">-->
    <!--          <div class="titles">-->
    <!--            项目分类-->
    <!--          </div>-->
    <!--          <div class="con">-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#1890FF;"></div>-->
    <!--              <div>音频（路况）</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#3DB077;"></div>-->
    <!--              <div>文字（路况）</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#FFD666;"></div>-->
    <!--              <div>图文</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div class="blockColor" style="background:#F4652E;"></div>-->
    <!--              <div>视频</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div>-->
    <!--          <div class="titles">-->
    <!--            发布数量-->
    <!--          </div>-->
    <!--          <div class="con numStyFm lts" style="text-align:center;">-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.cycleAudio) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.cycleWord) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.cyclePhoto) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.cycleVideo) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div>-->
    <!--          <div class="titles">-->
    <!--            累计数量-->
    <!--          </div>-->
    <!--          <div class="con numStyFm lts" style="text-align:center;">-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.audio) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.word) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.photo) }}</div>-->
    <!--            </div>-->
    <!--            <div>-->
    <!--              <div>{{ formatQ(issueInfoForm.video) }}</div>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </div>-->
    <!--  </div>-->
    <!--</div>-->
  </div>
</template>

<script>
// 翻牌
import numChange from '../components/numChange'
// 地图
import maps from '../components/maps'
// 我们的服务次数
import sertimesEcharts from '../components/sertimesEcharts'
// 图文
import ouraffectLine from '../components/ouraffectLine'
// 视频
import ouraffectZhu from '../components/ouraffectZhu'
// 音频
import ouraffectMian from '../components/ouraffectMian'
// 文字
import ouraffectLinemain from '../components/ouraffectLinemain'
// ECT
import ouraffectEtc from '../components/ouraffectEtc'
// 我们的发布
import issuetotleBing from '../components/issuetotleBing'
import publicBing from '../components/publicBing2'
import pageViewsLine from '../components/pageViewsLine'
// 直播组件
import HlsPlayer from '../components/HlsPlayer.vue'
import HlsPlayerWithDanmakuDisplay from '../components/HlsPlayerWithDanmakuDisplay.vue';
import '@fortawesome/fontawesome-free/css/all.min.css'
import pageConfig from '../api/config'

export default {
  name: 'newMetaScreen',
  components: {
    numChange,
    maps,
    sertimesEcharts,
    ouraffectLine,
    ouraffectZhu,
    ouraffectMian,
    ouraffectLinemain,
    ouraffectEtc,
    issuetotleBing,
    publicBing,
    pageViewsLine,
    HlsPlayer,
    HlsPlayerWithDanmakuDisplay
  },
  data () {
    return {
      timeSelected: '1',
      timeList: [
        {
          name: '今日',
          value: '1'
        },
        {
          name: '近一周',
          value: '2'
        },
        {
          name: '本月',
          value: '3'
        },
        {
          name: '上月',
          value: '4'
        },
        {
          name: '今年',
          value: '5'
        },
        {
          name: '去年',
          value: '6'
        }
      ],
      // 我们的用户
      userInfoFrom: {},
      // 地图
      mapFrom: '',
      // 服务次数
      serverInfoFrom: '',
      // 我们的影响力
      ouraffectFrom: '',
      // 我们的发布
      issueInfoForm: '',
      // 阅读浏览量
      pageViewsForm: '',
      // 最新推荐数据
      recommendationList: [],
      typeList: [
        {
          name: '文字',
          value: 1
        },
        {
          name: '音频',
          value: 2
        },
        {
          name: '视频',
          value: 3
        },
        {
          name: '图文',
          value: 4
        }
      ],
      typeSelected: 1,
      publicTypeSelected: 1,
      viewTypeSelected: 1,
      timeId: '',
      mapObj: '',
      mapPointObj: '',
      mapLiaoningPointObj: '',
      liaoningmapObj: '',
      nowTime: '',
      videoSource: '',
      receivedDanmakus: [],
      ws: null,
      // 滚动速度(像素/秒)
      scrollSpeed: 30,
      // 滚动间隔(毫秒)
      scrollInterval: 50,
      // 滚动定时器
      scrollTimer: null,
      // 是否正在滚动
      isScrolling: false,
      // 当前滚动位置
      currentScrollTop: 0,
      // 内容总高度
      scrollHeight: 0
      // videoSource: '//pull-x2-f5-hls.douyincdn.com/third/stream-117947227888681643_ld/index.m3u8?arch_hrchy=w1&exp_hrchy=w1&expire=1758160413&major_anchor_level=common&sign=06a65c054a7792c104e2c94f8000cc5e&t_id=037-20250911095332CEAE88B3957789EDA831-gheTmj&volcSecret=06a65c054a7792c104e2c94f8000cc5e&volcTime=1758160413' // 替换为实际直播链接
    }
  },
  created() {
    // 模拟从服务器接收弹幕（实际应用中应从WebSocket获取）
    this.startMockDanmakuReceiving()
    this.$nextTick(() => {
      this.startScroll()
    })
  },
  // beforeUnmount() {
  //   clearInterval(this.mockInterval);
  // },
  beforeDestroy() {
    // 组件销毁时清除定时器
    this.stopScroll();
  },
  mounted () {
    this.setIn()
    this.getDate()
    this.getMap()
    this.getliaoningMap()
    this.getMapPoint()
    this.getLiaoningMapPoint()
    this.startMockDanmakuReceiving()
    // 初始化后开始滚动
    this.$nextTick(() => {
      this.startScroll()
    })
  },
  methods: {
    getDate () {
      // 获取地图数据
      this.$Post1(
        'screenInfoNew/getScreenInfo',
        { time: this.timeSelected },
        ({ data }) => {
          clearInterval(this.timeId);
          // this.userInfoFrom = data.userInfo;
          this.mapFrom = data.mapInfo;
          this.serverInfoFrom = data.serverInfo;
          this.ouraffectFrom = data.clickInfo;
          // this.issueInfoForm = data.publishInfo;
          this.timeId = setInterval(() => {
            if (this.typeSelected != 5) {
              this.typeSelected++;
            } else {
              this.typeSelected = 1;
            }
          }, 7 * 1000);
        },
        () => { }
      )

      // 获取我们的用户数据
      this.$Get2(
        'integration/api/user-info/getInfo?type=' + this.timeSelected,
        {},
        ({data}) => {
          this.userInfoFrom = data
        },
        () => {
        }
      )

      // 获取我们的发布数据
      this.$Get2(
        'integration/api/publish/getInfo?rangeType=' + this.timeSelected + '&dataType=' + this.publicTypeSelected,
        {},
        ({data}) => {
          this.issueInfoForm = data
        },
        () => {
        }
      )

      // 阅读浏览量数据
      this.$Get2(
        'integration/api/pageviews/getInfo?rangeType=' + this.timeSelected + '&dataType=' + this.viewTypeSelected,
        {},
        ({data}) => {
          this.pageViewsForm = data
        },
        () => {
        }
      )

      // 最新推荐数据
      this.$Get2(
        'integration/api/recommendation/getList',
        {},
        ({data}) => {
          this.recommendationList = data
        },
        () => {
        }
      )
      // 获取抖音直播地址
      this.$Get2(
        'integration/douyin-liveurl/getLiveurlStr',
        {},
        ({data}) => {
          this.videoSource = data
        },
        () => {
        }
      )
    },
    getPublicDate () {
      // 获取我们的发布数据
      this.$Get2(
        'integration/api/publish/getInfo?rangeType=' + this.timeSelected + '&dataType=' + this.publicTypeSelected,
        {},
        ({data}) => {
          this.issueInfoForm = data
        },
        () => {
        }
      )
    },
    getPageViewsDate () {
      this.$Get2(
        'integration/api/pageviews/getInfo?rangeType=' + this.timeSelected + '&dataType=' + this.viewTypeSelected,
        {},
        ({data}) => {
          this.pageViewsForm = data
        },
        () => {
        }
      )
    },
    // 千分符
    formatQ (str) {
      if (!str) return 0
      str = parseInt(str)
        .toString()
        .split('.')
      // console.log("第一次处理后的num",str);
      str[0] = str[0].replace(new RegExp('(\\d)(?=(\\d{3})+$)', 'ig'), '$1,')
      // console.log("第一次处理后的num",str[0]);
      return str.join('.')
    },

	  formatDate(row, column) {
      // 使用 JavaScript 的 Date 对象和 toISOString 方法格式化日期
      // 或者使用 moment.js, dayjs 等库进行更复杂的日期格式化
      const date = new Date(row[column.property]);
      return date.toISOString().split('T')[0]; // 转换为 YYYY-MM-DD 格式
    },

    getMap () {
      this.$Getgeojson1(
        'geodata/province',
        {time: this.timeSelected},
        ({data}) => {
          console.log(data)
          this.mapObj = data
        },
        () => {
        }
      )
    },
    getliaoningMap () {
      this.$Getgeojson1(
        'geodata/liaoning',
        {time: this.timeSelected},
        ({data}) => {
          console.log(data)
          this.liaoningmapObj = data
        },
        () => {
        }
      )
    },
    getMapPoint () {
      this.$Getgeojson1(
        'geodata/dataPoint',
        {time: this.timeSelected},
        ({data}) => {
          console.log(data)
          this.mapPointObj = data
        },
        () => {
        }
      )
    },
    getLiaoningMapPoint () {
      this.$Getgeojson1(
        'geodata/dataLiaoningPoint',
        {time: this.timeSelected},
        ({data}) => {
          console.log(data)
          this.mapLiaoningPointObj = data
        },
        () => {
        }
      )
    },
    // 格式化当前时间
    formatTime () {
      let now = new Date()

      // 格式化日期部分
      let year = now.getFullYear();
      let month = String(now.getMonth() + 1).padStart(2, "0")
      let day = String(now.getDate()).padStart(2, "0")

      // 格式化时间部分
      let hours = String(now.getHours()).padStart(2, "0")
      let minutes = String(now.getMinutes()).padStart(2, "0")
      let seconds = String(now.getSeconds()).padStart(2, "0")

      // 星期映射（中文）
      let weekDays = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ]
      let weekDay = weekDays[now.getDay()]

      return `${year}-${month}-${day}  ${weekDay}  ${hours}:${minutes}:${seconds}`
    },
    timeSelectChange () {
      clearInterval(this.timeId)
      this.getDate()
    },
    publicSelectChange () {
      this.getPublicDate()
    },
    pageViewsSelectChange () {
      this.getPageViewsDate()
    },
    setIn () {
      setInterval(() => {
        this.getDate()
      }, 35 * 1000)
      this.nowTime = this.formatTime() // 立即执行一次
      setInterval(() => {
        this.nowTime = this.formatTime()
      }, 1000)
    },
    // 视频播放
    // onPlay () {
    //   console.log('视频开始播放');
    // },
    // onPause () {
    //   console.log('视频暂停');
    // },
    // onEnded () {
    //   console.log('视频播放结束');
    // },
    // onError (error) {
    //   console.error('播放错误:', error);
    // },

    startMockDanmakuReceiving () {
      if (!'WebSocket' in window) {
        // this.$modal.msgError("您的浏览器不支持WebSocket");
        console.log('您的浏览器不支持WebSocket')
        return
      }
      // 建立连接
      this.ws = new WebSocket(pageConfig.websocket_url);
      // 监听 open 事件
      this.ws.onopen = (event) => {
        this.content = this.content + "\n**********************连接开始**********************\n";
      };
      // 监听 message 事件
      this.ws.onmessage = (event) => {
        try {
          let data = event.data;
          // 1. 收到心跳
          if (data === 'pong') {
            return;
          }
          // 2.1 解析 type 消息类型
          let jsonMessage = JSON.parse(data)
          let type = jsonMessage.Type
          if (!type) {
            // message.error('未知的消息类型：' + data.value)
            return
          }
          let jsonData = JSON.parse(jsonMessage.Data)
          // 直播间昵称
          // let jsonOnwer = jsonData.Onwer
          // let onwerNickname = ''
          // if (jsonOnwer) {
          //   onwerNickname = jsonOnwer.Nickname
          // }
          // 弹幕id
          let msgId = jsonData.MsgId
          // 用户昵称
          let jsonUser = jsonData.User
          let userNickname = ''
          if (jsonUser) {
            userNickname = jsonUser.Nickname
          }
          // 消息内容
          let content = jsonData.Content

          // 消息类型
          let messageType = ''
          let contentMsg = ''
          // 弹幕颜色
          let color = ''
          if (type == 1) {
            color = '#ffffff'
            messageType = '弹幕消息'
            contentMsg = `【${messageType}】 ${userNickname}：${content}`
          } else if (type == 2) {
            color = '#00ff00'
            messageType = '点赞消息'
            contentMsg = `【${messageType}】 ${content}`
          } else if (type == 3) {
            color = '#ff00ff'
            messageType = '进直播间'
            contentMsg = `【${messageType}】 ${content}`
          } else if (type == 4) {
            color = '#ffff00'
            messageType = '关注消息'
            contentMsg = `【${messageType}】 ${content}`
          } else if (type == 6) {
            color = '#ff0000'
            messageType = '直播间统计'
            contentMsg = `【${messageType}】 ${content}`
          } else {
            color = '#00ffff'
            contentMsg = `${content}`
          }
          // 添加新弹幕
          this.receivedDanmakus.push({
            id: msgId, // 唯一ID
            text: contentMsg,
            isSpecial: false,
            color: color // 特殊弹幕自定义颜色
          });

          // 限制弹幕列表长度，只保留最近的100条
          if (this.receivedDanmakus.length > 50) {
            this.receivedDanmakus.shift();
          }
        } catch (error) {
          // this.$modal.msgError('处理消息发生异常：' + event.data);
          console.error(error);
        }
      };
      // 监听 close 事件
      this.ws.onclose = (event) => {
        // this.content = this.content + "**********************连接关闭**********************\n";
      };
      // 监听 error 事件
      this.ws.error = (event) => {
        // this.content = this.content + "**********************连接异常**********************\n";
      };




      // 模拟每2秒接收一条新弹幕
      // this.mockInterval = setInterval(() => {
      //   const mockTexts = [
      //     "666666",
      //     "这个直播太精彩了！",
      //     "主播好厉害",
      //     "有人知道这个背景音乐吗？",
      //     "刚来，发生了什么？",
      //     "大家晚上好",
      //     "这个画质不错啊",
      //     "哈哈哈太好笑了",
      //     "支持支持！",
      //     "什么时候开始抽奖？"
      //   ];
      //
      //   const randomText = mockTexts[Math.floor(Math.random() * mockTexts.length)];
      //   const isSpecial = Math.random() > 0.9; // 10%概率是特殊弹幕
      //
      //   // 添加新弹幕
      //   this.receivedDanmakus.push({
      //     id: Date.now() + Math.floor(Math.random() * 1000), // 唯一ID
      //     text: randomText,
      //     isSpecial: isSpecial,
      //     color: isSpecial ? '#ffcc00' : null // 特殊弹幕自定义颜色
      //   });
      //
      //   // 限制弹幕列表长度，只保留最近的100条
      //   if (this.receivedDanmakus.length > 100) {
      //     this.receivedDanmakus.shift();
      //   }
      // }, 2000);
    },

    // 开始滚动
    startScroll() {
      // 清除已有定时器
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer);
      }

      // 获取表格滚动容器
      const tableBody = this.$refs.userInfoTable.bodyWrapper;
      if (!tableBody) return;

      this.isScrolling = true;

      // 计算每次滚动的距离
      const step = this.scrollSpeed * (this.scrollInterval / 1000);

      this.scrollTimer = setInterval(() => {
        // 获取内容高度和容器高度
        this.scrollHeight = tableBody.scrollHeight;
        const clientHeight = tableBody.clientHeight;
        // 如果内容不足以滚动，则停止
        // if (this.scrollHeight <= clientHeight) {
        //   this.stopScroll();
        //   return;
        // }

        // 计算新的滚动位置
        this.currentScrollTop += step;

        // 当滚动到底部时，重置到顶部
        if (this.currentScrollTop >= this.scrollHeight - clientHeight) {
          this.currentScrollTop = 0;
        }

        // 设置滚动位置
        tableBody.scrollTop = this.currentScrollTop;
      }, this.scrollInterval);
    },

    // 停止滚动
    stopScroll() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer);
        this.scrollTimer = null;
      }
      this.isScrolling = false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.header .timeChoose {
  width: 100%;

  /deep/ .el-radio-group {
    width: 4.70rem;
    display: flex;
    justify-content: space-between;
  }

  /deep/ .el-radio-button {
    width: 0.78rem;
    height: 0.44rem;
    background: inherit;
    border-radius: 0.02rem;
    font-size: 0.2rem;

  }

  /deep/ .el-radio-button__inner {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    color: #fff;
    border: none;
    padding: 0 !important;
    text-align: center;
    line-height: 0.44rem;
  }

  /deep/ .el-radio-button__orig-radio {
    display: none;
  }

  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    width: 100%;
    height: 100%;
    background-color: inherit;
    color: #fff;
  }

  /deep/ .is-active {
    width: 0.78rem;
   /* background: rgba(24, 144, 255, 1);*/
  }
   /deep/ .is-active .el-radio-button__inner{color:#f8e11d !important;font-weight:bold;-webkit-box-shadow:0px 0 0 0 #409EFF; box-shadow:0px 0 0 0 #409EFF;}

  /deep/ .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
    box-shadow: none;
  }

}

.browse-stats .typeSelect {
  width: 100%;

  /deep/ .el-radio-group {
    width: 2.50rem;
    display: flex;
    justify-content: space-between;
  }

  /deep/ .el-radio-button {
    width: 0.78rem;
    height: 0.44rem;
    background: inherit;
    border-radius: 0.02rem;
    font-size: 0.2rem;

  }

  /deep/ .el-radio-button__inner {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    color: #fff;
    border: none;
    padding: 0 !important;
    text-align: center;
    line-height: 0.44rem;
  }

  /deep/ .el-radio-button__orig-radio {
    display: none;
  }

  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    width: 100%;
    height: 100%;
    background-color: inherit;
    color: #fff;
  }

  /deep/ .is-active {
    width: 0.78rem;
   /* background: rgba(24, 144, 255, 1);*/
  }

    /deep/ .is-active .el-radio-button__inner{color:#f8e11d !important;font-weight:bold;-webkit-box-shadow:0px 0 0 0 #409EFF; box-shadow:0px 0 0 0 #409EFF;}

  /deep/ .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
    box-shadow: none;
  }

}

.publish-stats .typeSelect {
  width: 100%;

  /deep/ .el-radio-group {
    width: 2.50rem;
    display: flex;
    justify-content: space-between;
  }

  /deep/ .el-radio-button {
    width: 0.78rem;
    height: 0.44rem;
    background: inherit;
    border-radius: 0.02rem;
    font-size: 0.2rem;

  }

  /deep/ .el-radio-button__inner {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    color: #fff;
    border: none;
    padding: 0 !important;
    text-align: center;
    line-height: 0.44rem;
  }

  /deep/ .el-radio-button__orig-radio {
    display: none;
  }

  /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    width: 100%;
    height: 100%;
    background-color: inherit;
    color: #fff;
  }

  /deep/ .is-active {
    width: 0.78rem;
    /*background: rgba(24, 144, 255, 1);*/
  }
   /deep/ .is-active .el-radio-button__inner{color:#f8e11d !important;font-weight:bold;-webkit-box-shadow:0px 0 0 0 #409EFF; box-shadow:0px 0 0 0 #409EFF;}

  /deep/ .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
    box-shadow: none;
  }

}

.screenCon {
  background-color: #0e3c5b;
  width: 100%;
  position: relative;
  height: 10.8rem;
  padding-top: 0rem;

  .sssj {
    position: absolute;
    top: 0.6rem;
    right: 0.3rem;
    font-size: 0.14rem;
  }

  .title {
    text-align: center;
    font-size: 0.52rem;
    height: 0.72rem;
    line-height: 0.72rem;
    background: linear-gradient(180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 250, 238, 1) 58%,
    rgba(255, 214, 102, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: AlibabaPuHuiTiB;
    font-weight: bolder;
    letter-spacing: 0.08rem;
  }

  .contain {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem 0.22rem 0.28rem;
    margin-top: 0.12rem;

    > div {
      height: 9.35rem;
    }

    .left {
      width: 5.14rem; // padding: 0.2rem 0 0.2rem 0.42rem;
      .userNum {
        width: 100%;
        height: 1.84rem;
        background: rgba(18, 71, 106, 1);
        padding: 0.22rem 0 0.19rem 0.15rem;

        > div {
          display: flex;

          .titles {
            width: 0.44rem;
            height: 0.56rem;
            font-size: 0.22rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.28rem;
            margin-right: 0.12rem;
          }
        }
      }

      .ourUser {
        margin-top: 0.15rem;
        width: 5.14rem;
        height: 7.58rem;
        background: rgba(18, 71, 106, 1);
        padding: 0.26rem 0 0.29rem 0.15rem;

        .cons {
          .othersCon {
            padding: 0.14rem 0;
            border-top: 0.01rem solid rgba(15, 67, 101, 1);

            .leftIcon {
              display: flex;
              align-items: center;
              font-size: 0.18rem;

              img {
                width: 0.3rem;
                height: 0.3rem;
              }
            }

            .othersCon:first-child {
              border: none;
            }

            .rightCon {
              width: 100%;
              margin-top: .1rem;

              .conTitles {
                font-size: 0.18rem;
                color: #91B3C9;
              }

              .conNum {
                font-size: 0.37rem;
                margin-top: 0.11rem;
              }
            }

            .disF {
              display: flex;

              > div {
                width: 49%;
              }
            }
          }
        }
      }
    }

    .header {
      width: 8.15rem;
      margin: 0 0.12rem;

      .timeChoose {
        width: 100%;

        /deep/ .el-radio-group {
          width: 8.15rem;
          display: flex;
          justify-content: space-between;
        }

        /deep/ .el-radio-button {
          width: 1.28rem;
          height: 0.44rem;
          background: inherit;
          border-radius: 0.02rem;
          font-size: 0.2rem;

        }

        /deep/ .el-radio-button__inner {
          width: 100%;
          height: 100%;
          background-color: transparent !important;
          color: #fff;
          border: none;
          padding: 0 !important;
          text-align: center;
          line-height: 0.44rem;
        }

        /deep/ .el-radio-button__orig-radio {
          display: none;
        }

        /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          width: 100%;
          height: 100%;
          background-color: inherit;
          color: #fff;
        }

        /deep/ .is-active {
          width: 1.34rem;
          background: rgba(24, 144, 255, 1);
        }

        /deep/ .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
          box-shadow: none;
        }

      }

      .mapFrom {
        position: relative;
        background-color: #12476a;
        margin-top: 0.12rem;
        width: 8.15rem;
        height: 6.19rem;

        /deep/ #map {
          width: 8.15rem;
          height: 6.19rem;
          position: relative;
        }

        .fangCount {
          // width: 1.44rem;
          height: 0.93rem;
          position: absolute;
          background-color: rgba(14, 206, 202, 0.5);
          top: 0.56rem;
          right: 0rem;
          z-index: 10;

          li {
            padding: 0.045rem 0.04rem;

            span:first-child {
              color: #040f34;
              font-size: 0.12rem;
            }

            span:last-child {
              color: #ff7858;
              font-size: 0.2rem;
              font-weight: bold;
            }
          }
        }

        /deep/ .l7-ctrl-logo {
          background-image: none !important;
        }

        /deep/ .amap-container {
          opacity: 0.5 !important;
        }

        /deep/ .l7-control-container {
          font-size: 0.12rem;
        }

      }

      .ourServiceTime {
        padding: 0.2rem;
        width: 8.15rem;
        height: 2.69rem;
        background: rgba(18, 71, 106, 1);
        margin-top: 0.13rem;
        display: flex;

        .serTable {
          display: flex;
          justify-content: space-between;
          width: 5.27rem;
          margin-left: 0.5rem;
          margin-top: 0.08rem;

          .titles {
            font-size: 0.16rem;
            text-align: center;
          }

          .con {
            > div {
              .blockColor {
                width: 0.16rem;
                height: 0.08rem;
                border-radius: 0.1rem;
                margin-right: 0.12rem;
              }
            }
          }

          .xmfl {
            font-size: 0.16rem;

            .con {
              > div {
                display: flex;
                align-items: center;
                margin-top: 0.27rem;
              }
            }
          }

          .fwcs,
          .ljcs {
            .con {
              font-size: 0.24rem;
              text-align: center;

              > div {
                margin-top: 0.24rem;
              }

              > div:first-child {
                color: #ffd666;
              }
            }
          }
        }
      }
    }

    .right {
      width: 5.14rem;

      .userAffect {
        background-color: #12476a;
        padding: 0.22rem 0 0 0.17rem;
        width: 5.14rem;
        height: 4.2rem;

        .typeSelect {
          margin-top: 0.32rem;
        }

        .userAffectTu {
          margin-top: 0.28rem;
        }
      }

      .ourIssue {
        padding: 0.26rem 0 0 0.18rem;
        width: 5.12rem;
        height: 5.26rem;
        background: rgba(18, 71, 106, 1);
        margin-top: 0.12rem;

        .numEcharts {
          display: flex;
          width: 100%;

          .nums {
            margin-top: 0.26rem;
            margin-left: 0.21rem;
            white-space: nowrap;

            .titles {
              font-size: 0.18rem;
            }

            .counts {
              font-size: 0.3rem;
              color: #ffd666;
            }
          }
        }

        .detialTable {
          display: flex;
          justify-content: space-between;
          text-align: center;
          padding: 0.21rem;
          margin-top: 0.17rem;

          .xmfl {
            .titles {
              text-align: left;
            }

            .con {
              > div {
                margin-top: 0.26rem;
                display: flex;
                align-items: center;
                font-size: 0.16rem;
              }
            }
          }

          .titles {
            font-size: 0.16rem;
          }

          .con {
            font-size: 0.24rem;

            > div {
              margin-top: 0.21rem;

              .blockColor {
                width: 0.16rem;
                height: 0.08rem;
                border-radius: 0.1rem;
                margin-right: 0.12rem;
              }
            }
          }
        }
      }

      /deep/ .el-radio-group {
        display: flex;

      }

      /deep/ .el-radio-button {
        width: 1.04rem;
        height: 0.34rem;
        background: #216795;
        border-radius: 0.02rem;
        font-size: 0.16rem;
        margin-right: 0.12rem;
      }

      /deep/ .el-radio-button__inner {
        width: 100%;
        height: 100%;
        background-color: inherit;
        color: #fff;
        border: none;
        padding: 0 !important;
        text-align: center;
        line-height: 0.34rem;
        font-size: 0.16rem;
      }

      /deep/ .el-radio-button__orig-radio {
        display: none;
      }

      /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
        width: 100%;
        height: 100%;
        background-color: inherit;
        color: #fff;
      }

      /deep/ .is-active {
        background: rgba(24, 144, 255, 1);
      }

      /deep/ .el-radio-button:focus:not(.is-focus):not(:active):not(.is-disabled) {
        box-shadow: none;
      }

      // .numChange {
      //   .titles {
      //     font-size: 0.16rem;
      //     color: #92a3cc;
      //     margin-top: 0.4rem;
      //     margin-bottom: 0.31rem;
      //   }
      //   .numChange1 {
      //     /deep/ .box-item {
      //       color: #0ececa !important;
      //     }
      //   }
      //   .numChange2 {
      //     /deep/ .box-item {
      //       color: #ff7858 !important;
      //     }
      //   }
      // }
      // .scrollTable1 {
      //   margin-top: 0.4rem;
      // }
    }
  }
}


.numStyFm {
  font-family: digital;
}

// .lts {
//   letter-spacing: 0.03rem;
// }

.blockTitle {
  display: flex;
  align-items: center;

  .blueBlock {
    width: 0.09rem;
    height: 0.09rem;
    background: rgba(24, 144, 255, 1);
    margin-right: 0.12rem;
  }

  .titleText {
    font-size: 0.22rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: rgba(255, 255, 255, 1);
    line-height: 0.3rem;
  }
}

/* 表格整体背景透明 */
/deep/ .el-table {
  background-color: transparent !important;
  color: #ffffff;
}

/* 表格头部背景透明 */
/deep/ .el-table th {
  background-color: transparent !important;
  color: #ffffff;
}

/* 表格行背景透明 */
/deep/ .el-table tr {
  background-color: transparent !important;
}

/* 处理表格hover效果 */
/deep/ .el-table__body tr:hover > td {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* 处理选中行样式 */
/deep/ .el-table__body tr.current-row > td {
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* 表格内部横线边框 */
/deep/ .el-table__row td {
  border-bottom-color: rgba(125, 172, 241, 0.5) !important; /* 行与行之间的分隔线 */
}

/* 处理分组表头的边框 */
/deep/ .el-table__header-wrapper .el-table__header th {
  border-bottom-color: rgba(125, 172, 241, 0.5) !important;
}

/* 处理固定列的伪元素边框 */
/deep/ .el-table--border::after,
/deep/ .el-table--group::after,
/deep/ .el-table::before {
  background-color: transparent !important; /* 固定列底部边框 */
}
</style>
